<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/tentime">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
	<link rel="stylesheet" th:href="@{/lib/zTree_v3/css/zTreeStyle/zTreeStyle.css}" type="text/css">
	    <style>
	        .ztree{
	            margin-left: 12px;
	            margin-bottom: 70px;
	        }
            /*
	        .tentime-compile .tentime-finally {
	            position: fixed;
	            bottom: 0;
	            left: 0;
	            right: 0;
	            background-color: #ffffff;
	            height: 35px;
			    border-top: 1px solid #ddd;
			    padding: 5px 0 0 0!important;
			    margin: 0px 30px 0px!important;
	        }
            */
	    </style>
</head>
<body>
<div class="layui-form tentime-compile">
    <form id="inputForm" th:object="${entity}" class="layui-form">
        <input id="id" type="hidden" name="id" th:if="${entity}" th:value="${entity.id}"/>
        <div class="layui-form-item">
        	<div class="layui-inline">
	            <label class="layui-form-label required">角色标识</label>
	            <div class="layui-input-inline">
	                <input class="layui-input" type="text" name="name" lay-verify="required" placeholder="请输入角色编号" th:value="${entity?.name}">
	            </div>
            </div>
            <div class="layui-inline">
	            <label class="layui-form-label required">角色名称</label>
	            <div class="layui-input-inline">
	                <input class="layui-input" type="text" name="title" lay-verify="required" placeholder="请输入角色名称" th:value="${entity?.title}">
	            </div>
            </div>
            <div class="layui-inline">
	            <label class="layui-form-label">备注</label>
	            <div class="layui-input-inline">
	                <input class="layui-input" type="text" name="remark" placeholder="请输入备注" th:value="${entity?.remark}">
	            </div>
            </div>
        </div>
        <hr>
        <div class="layui-inline">
            <label class="layui-form-label">授权</label>
            <div class="layui-input-inline">
               <ul id="authTree" class="ztree" th:attr="data-url=@{/system/role/authList(ids=${entity?.id})}"></ul>
            </div>
        </div>
        <div class="layui-form-item tentime-finally">
            <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit lay-filter="submit_button" shiro:hasAnyPermissions="system:role:add,system:role:edit"><i class="fa fa-check-circle"></i> 保存</button>
            <button class="layui-btn layui-btn-sm layui-btn-primary" onclick="closeWin();" type="button"><i class="fa fa-times-circle"></i> 关闭</button>
        </div>
    </form>
</div>
<script th:replace="/common/template :: common"></script>
<script type="text/javascript" th:src="@{/lib/zTree_v3/js/jquery.ztree.core.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/zTree_v3/js/jquery.ztree.excheck.min.js}"></script>
<script type="text/javascript">
    layui.use(['form','layer'], function () {
        window.form = layui.form;
        var layer = layui.layer;
        form.on("submit(submit_button)", function (data) {
        	// 获取选中的菜单树节点
        	var zTreeObj = $.fn.zTree.getZTreeObj("authTree");
            var authList = zTreeObj.getCheckedNodes(true);
            var authIds = [];
            authList.forEach(function(item) {
                if(item.id > 0) {
                    authIds.push(item.id);
                }
            });
        	$("#inputForm").ajaxSubmit({
				type : "post"
	            ,url : ctx + '/system/role/saveEntity'
	            ,data: {'authId': authIds.toString()}
	            ,success : function(data) {
	            	var code = data.code, msg = data.msg;
	            	if (code == 200) {
	            		parent.layer.msg(msg, {icon: 1});
	            		closeWin();
	            		window.parent.reloadTable();
	            	} else {
	            		parent.layer.msg('数据验证失败：' + msg, {icon: 2});
	            	}
	            }
			});
       		return false;
       	});
        
        var setting = {
            check: {enable: true, chkboxType: { "Y" : "ps", "N" : "ps" }}
        	,data: {simpleData: {enable: true}}
        };
        $.get($("#authTree").data("url"), function(result) {
            var keyPid = [];
            result.data.forEach(function(item){
                keyPid[item.pid] = true;
            });
            var zNodes =[];
            result.data.forEach(function (item) {
                var menu = {
                    id: item.id,
                    pId: item.pid,
                    name: item.title
                };
                if(item.pid === 0){
                    menu.open = true;
                }
                if(item.url.indexOf("/index") !== -1 && keyPid[item.id]){
                    var index = {
                        id: item.id*-1,
                        pId: item.id,
                        name: "列表"
                    };
                    if(item.remark === "auth:true") {
                        index.checked = true;
                    }
                    zNodes.push(index);
                }
                if(item.remark === "auth:true"){
                    menu.checked = true;
                }
                zNodes.push(menu);
            });
            $.fn.zTree.init($("#authTree"), setting, zNodes);
        });
        
    });
</script>
</body>
</html>